<template>
	<view class="FFOR">
		<view class="record-bottom-container" v-for="(item,index) in itemsBottom" :key="index">
			<view class="record-bottom-flex1">
				<view class="flex1-flex1">
					<view class="flex1-flex1-text1">
						<text class="title">{{item.corporateName}}</text>
					</view>
					<view class="flex1-flex1-text2">
						<text class="title">{{item.buildingName}}</text>
					</view>
				</view>
				<view class="flex1-flex2">
					<text class="title">{{item.appointmentTime}}</text>
				</view>
			</view>
			<view class="record-bottom-flex2">
				<view class="flex2-flex1">
					<text class="title">{{item.orderTime}}</text>
				</view>
				<view class="flex2-flex2">
					<text class="title">{{item.state}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			itemsBottom: Array
		}
	}
</script>

<style>
	.record-bottom-container {
		display: flex;
		flex-flow: row nowrap;
		line-height: 1.5;
		padding: 18rpx 0;
		background-color: #FFFFFF;
	}

	.flex1-flex1 {
		display: flex;
		flex-grow: 1;
		flex-flow: row nowrap;
		align-items: center;
		font-weight: 800;
		font-size: 30rpx;
	}

	.record-bottom-flex2 {
		display: flex;
		flex-flow: column;
		width: 289rpx;
		align-items: flex-end;
	}

	.record-bottom-flex2 text {
		margin-right: 36rpx;
	}

	.record-bottom-flex1 {
		display: flex;
		flex-flow: column;
		width: 462rpx;
	}

	.record-bottom-flex1>view {
		margin-left: 36rpx;
	}

	.flex1-flex1-text2 {
		flex-grow: 1;
		text-align: right;
	}

	.flex2-flex1 {
		flex-grow: 1;
		display: flex;
		align-items: center;
	}

	.title {
		font-size: 26rpx;
	}
</style>
